<template lang="pug">
  .page.scenepay
    .mask(@click="goBack")
    .content.pos-r(:class="{'animated bounceInDown': isShow}")
      .close.pos-a.tac(@click="goBack")
        i.iconfont &#xe60b;
      .item
        .label {{ordertype == 6 ? '单个场景' : '全部场景'}} ：
          span
            strong.red ￥{{ getCurrentMoney }}
            | 元
        .radio-group()
          van-radio-group(v-model="ordertype", @change="changePayType")
            van-radio(name="6") 单个金额
            van-radio(name="7") 全部金额
      .item
        .label 支付方式：
        .payment.clearfix
          van-radio-group(v-model="payment")
            van-cell-group
              van-cell(@click="payment = '3'")
                van-radio(name="3") 账户余额
              van-cell(@click="payment = '2'")
                van-radio(name="2") 微信
      .btn-group.tac.mt20
        van-button(type='primary', @click="handlePay") 付款
</template>

<script>
import { Toast } from 'vant'
import { mapGetters } from 'vuex'
import { isWxBrowser } from '@/utils'
import autoSwitchSceneMixin  from '@/mixins/switch-scene'

export default {
  mixins: [autoSwitchSceneMixin],
  data() {
    return {
      isShow: false,
      ordertype: '6',
      payment: '3'
    }
  },
  mounted() {
    // 停止场景切换
    this.handleClearAutoSwitchScene()

    this.$vgo.on('scenepay:success', sceneId => {
      Toast.clear()
      this.$vgo.tip('支付成功', 'success')

      // 更新场景数据
      this.$vgo.emit('update:scene', sceneId)

      setTimeout(() => {
        this.goBack()
      }, 1000)
    })

    this.$vgo.on('scenepay:failed', () => {
      Toast.clear()
      this.$vgo.tip('支付失败', 'faile')
      this.goBack()
    })
  },
  computed: {
    ...mapGetters(['panoId', 'scenePayData']),
    getCurrentMoney() {
      if(this.scenePayData) {
        return this.ordertype == '6' ? this.scenePayData.onepaycount : this.scenePayData.allpaycount
      }
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
      // 付费成功后，重新开始场景切换
      this.handleRestartAutoSwitchScene()
    },
    changePayType(val) {
      this.ordertype = val
    },
    handlePay() {
      const toast = Toast.loading({
        duration: 0,       // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        mask: true,
        loadingType: 'spinner',
        message: '创建订单中'
      })

      let options = {
        panoId: this.panoId,
        ordertype: this.ordertype, // 单个6 全部7
        paytype: Number(this.payment),
        productid: this.ordertype == 7 ? this.panoId : this.$route.query.id, // 单场景sceneid 全部panoid
        totalfee: this.getCurrentMoney,
        return_url: $globalconfig.URLS.PANO_VIEW_PREFIX + this.panoId
      }
      // console.log(this.$route.query)
      // console.log(options)
      // return

      if(isWxBrowser()) {
         options.iswx = 'true'
      }
      this.$store.dispatch('scenePay', options)
    }
  }
}
</script>

<style lang="stylus">
@import '../../assets/styles/color.styl'
.van-radio
  padding-left: 10px
.scenepay
  .mask
    position: absolute
    left: 0
    top: 0
    right: 0
    bottom: 0
  .content
    position: absolute
    left: 50%
    top: 20%
    width: 300px
    padding: 20px
    border-radius: 6px
    margin-left: -150px
    background: $white
    box-sizing: border-box
    .close
      right: 0
      top: 0
      width: 30px
      line-height: 30px
      i
        font-size: 18px
        color: $black
    .item
      margin-bottom: 15px
    .label
      display: inline-block
      font-size: 14px
      margin-bottom: 10px
      color: $black
      strong
        margin: 0 10px
    .radio-group
      padding-left: 15px
      line-height: 30px
    .input-money
      margin: 10px 0
      width: 100%
      input
        width: 100%
        line-height: 26px
        box-sizing: border-box
    .money
      display: flex
      justify-content: space-between
      margin-bottom: 10px
      .money-btn
        flex: 0 0 45px
        height: 24px
        line-height: 24px
        text-align: center
        font-size: 12px
        color: $white
        border: 1px solid $gray
        border-radius: 4px
        &.active
          background: #4b0
          border: 1px solid #0a0
    .payment
      margin-top: 10px
      .item
        margin-bottom: 10px
      .el-radio.is-bordered
        display: block
        width: 200px
    .btn-group
      button
        width: 100%
        font-size: 16px

</style>
